<template>
  <div class="container">
    <!-- 顶部导航条 -->
    <TopNav></TopNav>

    <!-- 侧边导航栏 -->
    <Sidebar></Sidebar>

    <!-- 内容区 -->
    <div class="main">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
import Sidebar from "@/components/Sidebar";
import TopNav from "@/components/TopNav";
export default {
  name: "Layout",
  components: {
    Sidebar,
    TopNav
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style>
body {
  background-color: #f2f2f2;
}
.container {
  width: 100%;
  height: 100%;
}
.main {
  position: absolute;
  left: 201px;
  top: 50px;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
}
</style>
